<!DOCTYPE>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="./src/css/cssreset.css">
        <link rel="stylesheet" href="./src/css/header.css">
        <link rel="stylesheet" href="./src/css/index.css">
        <script src="./src/js/jquery-1.10.2.min.js" charset="utf-8"></script>

        <title>浙江省安全生产数据中心服务应用平台</title>
    </head>

    <body>
        <div class="wrapper">
            <div class="global-content">
                <script src="./src/js/header.js"></script>
                <div class="content clearfix">
                    <div class="section1 clearfix">
                        <div class="section-left">
                            <div class="section-left-item">
                                <div class="section-left-item-title clearfix">
                                    <p>
                                        <span class="list-num">2</span>
                                        <span class="list-name">重点监督<br/>工艺</span>
                                    </p>
                                    <p>
                                        <span class="list-num">2</span>
                                        <span class="list-name">重大<br/>危险源</span>
                                    </p>
                                    <p>
                                        <span class="list-num">2</span>
                                        <span class="list-name">重点监管<br/>危化品</span>
                                    </p>
                                    <p class="last">
                                        <span class="list-num">2</span>
                                        <span class="list-name">风险点</span>
                                    </p>
                                </div>
                                <div class="remind-box">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr>
                                                <th>隐患提醒</th>
                                                <td>
                                                    <p class="remind-name">待整改</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                                <td>
                                                    <p class="remind-name">超期未整改</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                                <td>
                                                    <p class="remind-name">挂牌督办</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>安全管理</th>
                                                <td>
                                                    <p class="remind-name">特种设备待检</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                                <td>
                                                    <p class="remind-name">作业待开票</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                                <td>
                                                    <p class="remind-name">风险待辨识</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>证件到期</th>
                                                <td>
                                                    <p class="remind-name">特种作业证</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                                <td>
                                                    <p class="remind-name">许可证</p>
                                                    <p class="remind-num">5</p>
                                                </td>
                                                <td style="display:none;">

                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="section-left-item">

                                <div class="warn-notice-box clearfix">
                                    <div class="notice-icon">
                                        <em class="danger-icon"></em> 危险预警
                                    </div>
                                    <div class="notice-list">
                                        <p>
                                            <span class="notice-list-title">安全：</span>
                                            <span class="notice-list-num"><em class="num-color1">35</em>次</span>
                                        </p>
                                        <p>
                                            <span class="notice-list-title">注意：</span>
                                            <span class="notice-list-num"><em class="num-color2">35</em>次</span>
                                        </p>
                                        <p>
                                            <span class="notice-list-title">警告：</span>
                                            <span class="notice-list-num"><em class="num-color3">35</em>次</span>
                                        </p>
                                        <p>
                                            <span class="notice-list-title">危险：</span>
                                            <span class="notice-list-num"><em class="num-color4">35</em>次</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="charts-box">
                                    <div id="line-charts" style="width:100%;height:100%;"></div>
                                </div>
                            </div>

                        </div>
                        <div class="section-middle">
                            <div class="maps-box">
                                <div class="mpas-mark">
                                    <span class="cg">储罐</span>
                                    <span class="wxy">危险源</span>
                                    <span class="fxd">风险点</span>
                                    <span class="cj">车间</span>
                                </div>

                                <div class="fxd1s maps-btn-hook">
                                    <div class="maps-content-box">
                                        <p>风险点A</p>
                                    </div>
                                </div>
                                <div class="fxd2s maps-btn-hook">
                                    <div class="maps-content-box">
                                        <p>风险点B</p>
                                    </div>
                                </div>
                                <div class="cjs maps-btn-hook">
                                    <div class="maps-content-box">
                                        <p>公用工程车间</p>
                                    </div>
                                </div>
                                <div class="wxys maps-btn-hook">
                                    <div class="maps-content-box">
                                        <p>100㎡液氯<br/>储罐A区</p>
                                    </div>
                                </div>
                                <div class="cgs maps-btn-hook">
                                    <div class="maps-content-box">
                                        <p class="title">液氯储罐3V0603B</p>
                                        <p>摄像头数量：2个（在线2个；离线0个）</p>
                                        <p>传感器数量：3个（在线3个；离线0个）</p>
                                        <p>温度传感器：1个（报警0个）</p>
                                        <p>湿度传感器：1个（报警0个）</p>
                                        <p>压力传感器：1个（报警1个）</p>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="section-right">
                            <div class="section-right-item">
                                <div class="audio-list">
                                    <div class="audio-box"></div>
                                    <div class="audio-box"></div>
                                    <div class="audio-box"></div>
                                    <div class="audio-box"></div>
                                </div>
                            </div>
                            <div class="section-right-item clearfix" style="padding:0;">
                                <div class="item-nav" id="item-nav-hook">
                                    <p class="navs on">
                                        <span>公用工程车间</span>
                                    </p>
                                    <p class="navs">
                                        <span>硅烷生产车间</span>
                                    </p>
                                    <p class="navs">
                                        <span>多晶硅生产车间</span>
                                    </p>
                                </div>
                                <div class="item-content">
                                    <div class="item-content-tj">
                                        <ol class="clearfix">
                                            <li class="first">
                                                <p class="icon " id="normal-hook"></p>
                                                <!-- <p class="icon danger"></p> -->
                                                <p class="icon-num">正常</p>
                                            </li>
                                            <li>
                                                <p class="tj-name">人员总数</p>
                                                <p class="tj-num">34人</p>

                                            </li>
                                            <li>
                                                <p class="tj-name">人员总数</p>
                                                <p class="tj-num">34人</p>

                                            </li>
                                            <li>
                                                <p class="tj-name">人员总数</p>
                                                <p class="tj-num">34人</p>

                                            </li>
                                        </ol>
                                    </div>
                                    <div class="item-content-table">
                                        <div class="table-box">
                                            <!-- <div class="table-title">
                                                <span><主要工艺></span>
                                                <span><主要物料></span>
                                                <span><主要设备></span>
                                            </div> -->
                                            <table id="item-content-hook">
                                                <thead>
                                                    <tr>
                                                        <td class="no-wrap">
                                                            <主要工艺>
                                                        </td>
                                                        <td class="no-wrap">
                                                            <主要物料>
                                                        </td>
                                                        <td class="no-wrap">
                                                            <主要设备>
                                                        </td>
                                                    </tr>
                                                </thead>
                                                <!-- <tbody>
                                                    <tr>
                                                        <td class="no-wrap">
                                                            四氢化铝钠制备
                                                        </td>
                                                        <td class="no-wrap">
                                                            四氢化铝钠
                                                        </td>
                                                        <td class="no-wrap">
                                                            反感器
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="no-wrap">
                                                            硅烷制备
                                                        </td>
                                                        <td class="no-wrap">
                                                            四氟化硅
                                                        </td>
                                                        <td class="no-wrap">
                                                            精馏塔
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="no-wrap">
                                                            硅烷净化
                                                        </td>
                                                        <td class="no-wrap">
                                                            甲苯
                                                        </td>
                                                        <td class="no-wrap">
                                                            贮罐
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="no-wrap">
                                                            四氟化铝钠(SAF)
                                                        </td>
                                                        <td class="no-wrap">
                                                            四氟化硅
                                                        </td>
                                                        <td class="no-wrap">
                                                            换热器
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="no-wrap">
                                                            多晶硅制备
                                                        </td>
                                                        <td class="no-wrap">
                                                            三乙基铝
                                                        </td>
                                                        <td class="no-wrap">
                                                            加热炉
                                                        </td>
                                                    </tr>
                                                </tbody> -->
                                            </table>
                                            <div class="contents-box clearfix">
                                                <ul id="zygy">
                                                    <li class="no-wrap">
                                                        四氢化铝钠制备
                                                    </li>
                                                    <li class="no-wrap">
                                                        硅烷制备
                                                    </li>
                                                    <li class="no-wrap">
                                                        硅烷净化
                                                    </li>
                                                    <li class="no-wrap">四氟化铝钠</li>
                                                    <li class="no-wrap">
                                                        多晶硅制备
                                                    </li>
                                                </ul>
                                                <ul id="zywl">
                                                    <li class="no-wrap">
                                                        四氢化铝钠

                                                    </li>
                                                    <li class="no-wrap">
                                                        四氟化硅

                                                    </li>
                                                    <li class="no-wrap">
                                                        甲苯

                                                    </li>
                                                    <li class="no-wrap">
                                                        四氟化硅

                                                    </li>
                                                    <li class="no-wrap">
                                                        三乙基铝

                                                    </li>
                                                </ul>
                                                <ul id="zysb">
                                                    <li class="no-wrap">
                                                        反感器

                                                    </li>
                                                    <li class="no-wrap">
                                                        精馏塔

                                                    </li>
                                                    <li class="no-wrap">
                                                        贮罐

                                                    </li>
                                                    <li class="no-wrap">
                                                        换热器

                                                    </li>
                                                    <li class="no-wrap">
                                                        加热炉

                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>


                    </div>
                    <div class="section2 clearfix">
                        <div class="section2-left">
                            <p class="all-notice">标准化评级</p>
                            <div class="section2-left-content clearfix">
                                <div class="ection2-left-content1">
                                    <div id="radio-charts" style="width:100%;height:100%;"></div>
                                </div>
                                <div class="ection2-left-content2">
                                    <p class="titles">累计得分排名</p>
                                    <ul>
                                        <li class="num1">
                                            风险管理
                                        </li>
                                        <li class="num2">
                                            作业安全
                                        </li>
                                        <li class="num3">
                                            事故与应急
                                        </li>
                                        <li class="num4">
                                            机构和职责
                                        </li>
                                        <li class="num5">
                                            教育培训
                                        </li>
                                        <li class="num6">
                                            法律法规和标准
                                        </li>
                                        <li class="num7">
                                            生产设施设备
                                        </li>
                                        <li class="num8">
                                            管理制度
                                        </li>
                                        <li class="num9">
                                            检查与自评
                                        </li>
                                        <li class="num10">
                                            职业健康
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="section2-middle">
                            <p class="all-notice">事故情况</p>
                            <div id="pie-timeLine" style="width:100%;height:100%;           "></div>
                            <div class="section2-middle-icon clearfix">
                                <p>
                                    3
                                    <em class="icon-landmine"></em>
                                </p>

                            </div>
                            <div class="section2-middle-icon clearfix" style="left:38px;">
                                <p>
                                    8
                                    <em class="icon-landmine"></em> <em class="icon-landmine"></em> <em class="icon-landmine"></em>
                                </p>

                            </div>
                            <div class="section2-middle-icon clearfix" style="left:63px;">
                                <p>
                                    5
                                    <em class="icon-landmine"></em> <em class="icon-landmine"></em>
                                </p>

                            </div>
                            <div class="section2-middle-icon clearfix" style="left:88px;">
                                <p>
                                    2
                                    <em class="icon-landmine"></em>
                                </p>

                            </div>
                            <div class="section2-middle-nav">
                                <div class="names">
                                    公用工程车间

                                </div>
                                <div class="names">
                                    硅烷生产车间

                                </div>
                                <div class="names">
                                    多晶硅生产车间

                                </div>
                                <div class="names">
                                    其他

                                </div>

                            </div>
                        </div>
                        <div class="section2-right clearfix">
                            <p class="all-notice">企业隐患排查情况</p>
                            <div id="bar2" class="left-chaerts" style="width:370px;height:100%; float:left"></div>
                            <div id="pie2" class="right-chaerts" style="width:220px;height:100%;float:right"></div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
        <script src="./src/js/after_compatibility.js" charset="utf-8"></script>
        <script src="./src/js/echarts1.min.js" charset="utf-8"></script>
        <script src="./src/js/index.js"></script>

    </body>

</html>
